<template>
	<view class="home-sidebar" :style="[showSidebar ? '' : {'height': '100vh'} ]">
		<z-sidebar-header/>
		<z-sidebar-body :titleList="titleList" :curSelectIndex="curSelectIndex"
		                @selectTitle="selectTitle" @deleteTitle="deleteTitle"/>
		<z-sidebar-tail :showSideBarButton="showSidebar" @clickSidebarPopup="clickSidebarPopup" @addTopic="addTopic"/>
	</view>
</template>

<script>
export default {
	emits: ["selectTitle", "clickSidebarPopup", "addTopic", "deleteTitle"],
	props: {
		titleList: {
			type: Array,
			default: () => uni.$u.chat.newChatDefault()
		},
		curSelectIndex: {
			type: Number,
			default: () => 0
		},
		showSidebar: {
			type: Boolean,
			default: () => true
		}
	},
	created() {
	},
	methods: {
		selectTitle(index) {
			this.$emit('selectTitle', index);
		},
		deleteTitle(index) {
			this.$emit('deleteTitle', index);
		},
		clickSidebarPopup(type) {
			this.$emit("clickSidebarPopup", type);
		},
		addTopic() {
			this.$emit("addTopic");
		},
	}
}
</script>

<style lang="scss">

@import "../css/chat.scss";

.home-sidebar {
	top: 0;
	width: $sidebar-width;
	box-sizing: border-box;
	padding: 20px;
	background-color: $second;
	display: flex;
	flex-direction: column;
	box-shadow: inset -2px 0 2px 0 rgba(0, 0, 0, 0.05);
	position: relative;
	transition: width 0.1s ease;
}

</style>